<template>
  <div class="webchatCard">
    <div
      :class="{ active: currentId === item._id }"
      class="cardItem"
      v-for="(item, index) in cardList"
      :key="item._id + index"
      tabindex="0"
      @onkeydown="handelKeydown($event, item)"
      @click.stop="handleClickItem(item, index)"
    >
      <!-- 只有在待处理列表中才会显示关闭按钮 -->
      <div
        class="deleteCard"
        v-if="
          (activeName === 'webchat_todo' &&
            webchatActiveName === 'webchat_todo') ||
          (activeName === 'webchat_leaveMessage' &&
            leaveMessageActiveName === 'leave_todo')
        "
        @click.stop="cardDelete(item)"
      >
        <span class="error">x</span>
      </div>
      <div
        v-if="
          ((activeName === 'webchat_todo' &&
            webchatActiveName === 'webchat_todo') ||
            (activeName === 'webchat_leaveMessage' &&
              leaveMessageActiveName === 'leave_todo')) &&
          item.setTopStatus === 'true'
        "
        class="zhidingCard"
      ></div>
      <div class="cardRight">
        <div class="cardTop">
          <!-- 有客户名展示客户名，会话模块 -->
          <span v-if="activeName === 'webchat_todo'">
            <span class="customerName">{{ item.visitorName }}</span>
            <span class="count">({{
              item.visitorMessageCount ? item.visitorMessageCount : 0
            }}/{{
              item.agentReplyMessageCount ? item.agentReplyMessageCount : 0
            }})</span>
          </span>
          <!-- 有客户名展示客户名，留言模块 -->
          <span class="customerName" v-else>{{ item.visitorName }}</span>
          <!-- 时间 -->
          <span
            v-if="
              activeName === 'webchat_todo' &&
              webchatActiveName === 'webchat_todo' &&
              item.lastMessage &&
              item.lastMessage.lastMessageFrom === 'agent'
            "
            class="time"
          >
            {{ item.lastAgentMessageTimestamp | timestampFormat }}
          </span>
          <webchatWaitTime
            v-else-if="
              item.visitorStartWaitTimestamp &&
              webchatActiveName === 'webchat_todo'
            "
            :color="currentId === item._id ? '#fff' : '#008BEE'"
            :webchatActiveName="webchatActiveName"
            :item="item"
            :visitorStartWaitTimestamp="item.visitorStartWaitTimestamp"
          >
          </webchatWaitTime>
          <!-- 已结束会话显示会话结束时间 -->
          <span
            class="time"
            v-else-if="
              activeName === 'webchat_todo' &&
              webchatActiveName === 'webchat_close'
            "
          >
            {{ item.endTimestamp | timestampFormat }}
          </span>
          <!-- 留言展示会话创建时间 -->
          <span class="time" v-else>{{
            item.createTimestamp | timestampFormat
          }}</span>
        </div>
        <div class="secondLine clearfix">
          <div class="lastMessageBox" v-if="item.lastMessage">
            <span
              class="lastMessageType"
              v-show="item.lastMessage.lastMessageFrom"
            >
              {{
                ['agent', 'withrawMsg'].includes(
                  item.lastMessage.lastMessageFrom
                )
                  ? '座席:'
                  : '访客:'
              }}
            </span>
            <span class="lastMessage" v-html="lastMessage(item)"></span>
          </div>
          <div
            class="lastMessageBox"
            v-if="activeName === 'webchat_leaveMessage'"
          >
            <span class="lastMessage">访客留言</span>
          </div>
          <div
            v-if="
              ['webchat_todo'].includes(activeName) &&
              toPeerObj[item.toPeer] &&
              item.toPeer
            "
            class="toPeer"
          >
            <span class="line">[</span>
            <span class="toPeerText">{{ toPeerObj[item.toPeer].name }}</span>
            <span class="line">]</span>
          </div>
          <el-badge
            :value="item.leakNum"
            :max="99"
            class="item fr"
            :hidden="!item.leakNum"
          >
          </el-badge>
        </div>
        <div class="cardBottom">
          <div class="wapMessge">
            <span class="V7_iconfont equipment">
              <img
                v-if="item && item.visitorHeadImg"
                :src="item.visitorHeadImg"
                alt=""
                class="visitorsHeadImg"
              />
              <span
                v-else
                :style="handleIsVistorBreakStyle(item, 'platForm')"
                class="V7_iconfont logo"
                :class="handlePlatformIcon(item)"
              ></span>
            </span>
            <span>{{ item.platform }}</span>
            <span class="line"></span>
            <span class="wapName">
              {{ handleAccessName(item) }}
            </span>
          </div>
          <div class="customMessage">
            <span class="lastMessage">
              <span v-for="(val,idx) of sessionTypeArr" :key="idx" >
                <template v-if="item[val]">{{ handleSessionType(val) }} </template>
                <template v-else>{{ handleSessionType(item) }} </template>
              </span>
            </span>
            <el-tag
              effect="dark"
              class="customName"
              v-if="item.labels && item.labels.length > 0"
              :style="`background: ${handleLabelName(item.labels[0]).color}`"
              >{{ handleLabelName(item.labels[0]).name }}</el-tag
            >
            <span class="lastMessage" v-else-if="item.labels && item.labels.length === 0"></span>
            <span class="lastMessage" v-if="!item.customerId">未知客户</span>
          </div>
        </div>
        <div class="opateTop">
          <!-- 上 -->
          <el-popover
            popper-class="transferPopover v7-micro"
            placement="right"
            width="250"
            :key="index"
            trigger="click"
          >
            <webchatTransfer
              :peerAndOnlineAgents="peerAndOnlineAgents"
              @refreshTransfer="refreshTransfer"
              @transferPeer="transferPeerOrAgent"
              @transferAgent="transferPeerOrAgent"
            >
            </webchatTransfer>
            <template slot="reference">
              <el-tooltip
                class="fr item"
                effect="dark"
                :content="sessionFlagIcon1(item).content"
                placement="right"
              >
                <span
                  v-if="sessionFlagIcon1(item).content !== ''"
                  class="V7_iconfont sessionFlag1"
                  :class="sessionFlagIcon1(item).icon"
                  @click="
                    iconClick($event, { info: sessionFlagIcon1(item), item }, index)
                  "
                >
                </span>
              </el-tooltip>
            </template>
          </el-popover>
        </div>
        <div class="opateBottom">
          <!-- 下 -->
          <el-tooltip
            class="fr item"
            effect="dark"
            :content="sessionFlagIcon(item).content"
            placement="right"
          >
            <span
              v-if="sessionFlagIcon(item).content !== ''"
              class="V7_iconfont sessionFlag"
              :class="sessionFlagIcon(item).icon"
              @click="iconClick($event, { info: sessionFlagIcon(item), item })"
            >
            </span>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { filterXSS, commonAction, deepClone } from '@/utils/common'
import { msgConvertion } from '@/utils/webchat'
import { WebchatModule } from '@/store/modules/webchat'
import webchatWaitTime from '@/views/webchat/common/webchatWaitTime.vue'
import webchatTransfer from '@/views/webchat/common/webchatTransfer.vue'
import { checkPermission } from '@/utils/directive'
import { on, off } from 'element-ui/src/utils/dom'
import { ArrayObj, PeerOrAgentObj, BreakStyleObj, PlatIcon, CardObj } from '@/views/webchat/webchatInterface'
import { CommonModule } from '@/store/modules/common'
const labelItem = {}
@Component({
  name: 'webchatCard',
  components: { webchatWaitTime, webchatTransfer },
  filters: {
    timestampFormat (timestamp: number) {
      const webchatTimstamp = new Date(timestamp).toDateString()
      const currentTimestamp = new Date().toDateString()
      const date = new Date(timestamp)
      let month: any = date.getMonth()
      let day: any = date.getDate()
      let hours: any = date.getHours()
      let minutes: any = date.getMinutes()
      let second: any = date.getSeconds()
      month = month + 1 > 9 ? month + 1 : '0' + (month + 1)
      day = day > 9 ? day : '0' + day
      hours = hours > 9 ? hours : '0' + hours
      minutes = minutes > 9 ? minutes : '0' + minutes
      second = second > 9 ? second : '0' + second
      if (currentTimestamp === webchatTimstamp) { // 今天座席回复时间
        return hours + ':' + minutes + ':' + second
      } else { // 昨天及更早座席回复时间
        return month + '/' + day
      }
    }
  }
})
export default class WebchatCard extends Vue {
  @Prop() private activeName!: any // 当前tab选中
  @Prop() private leaveMessageActiveName: any // 当前留言子tab选中
  @Prop() private cardList!: ArrayObj[] // 当前tab下的卡片列表
  @Prop() private webchatActiveName: any // 当前会话子tab选中
  private $store: any
  private $router: any
  private $route: any
  private $confirm: any
  private $message: any
  private accessList: any = []

  private itemObj: any = {} // 当前卡片

  private toPeerObj: any = {}

  private labelItem: any = {}

  private sessionTypeArr: any = ['isInitiatingSession', 'isRedirectSession', 'isInvitedSession', 'isLossSession', 'isActiveClaim']
  private peerAndOnlineAgents = [] // 技能组数据
  private currentId = '' // 当前会话的id

  get getAllLabels () {
    return (CommonModule as any).publicCache.customerAllLabels
  }

  private handlePlatformIcon (obj: PlatIcon) { // 处理卡片访客来源icon图标
    switch (obj.platform) {
      case 'pc': // pc
        return 'V7_iconV7tubiao_qudao-wangzhan'
      case 'wap': // wap、h5
        return 'V7_iconV7tubiao_qudao-H5'
      case 'weixin': // 微信
        return 'V7_iconV7tubiao_weixingongzhonghao'
      case 'wxmini': // 小程序
        return 'V7_iconV7tubiao_weixinxiaochengxu'
      case 'sdk': // sdk
        return 'V7_iconV7tubiao_app'
      case 'wxsdk': // 微信小程序sdk
        return 'V7_iconV7tubiao_weixinxiaochengxu1'
      case 'wxwork': // 企业微信
        return 'V7_iconV7tubiao_qiyeweixin'
      case 'ocpc': // 百度bcp
        return 'V7_iconV7tubiao_baiduBCP'
      case 'wxkf': // 微信客服
        return 'V7_iconV7tubiao_weixinkefu'
    }
  }

  private handleSeoSourceIcon (obj: any) { // 处理卡片访问来源icon图标
    switch (obj.seoSource) {
      case '百度搜索':
        return 'V7_iconV7tubiao_baidusousuo'
      case '360搜索':
        return 'V7_iconV7tubiao_360sousuo'
      case '搜狗搜索':
        return 'V7_iconV7tubiao_sougousousuo'
      case 'Google搜索':
        return 'V7_iconV7tubiao_Googlesousuo'
      case '其他网站':
        return 'V7_iconV7tubiao_qitawangzhan'
      case '站内':
        return 'V7_iconV7tubiao-zhannei'
      case '神马搜索':
        return 'V7_iconV7tubiao_shenmasousuo'
    }
  }

  private handleSessionTypeIcon (obj: any) { // 处理卡片会话类型icon图标
    switch (obj.sessionType) {
      case 'robot':
        return 'V7_iconV7tubiao_jiqiren'
      case 'redirect':
        return 'V7_iconV7tubiao_zhuanjiehuihua'
      case 'initiating':
        return 'V7_iconV7tubiao_zhudonghuihua'
      case 'invitation':
        return 'V7_iconV7tubiao_huihuayaoqing'
      case 'loss':
        return 'V7_iconV7tubiao_huihualiushi'
      case 'claim':
        return 'V7_iconV7tubiao_lingqu'
    }
  }

  private handleAccessName (obj: any) { // 处理网页名称
    if (obj.accessId) {
      let accessName = ''
      this.accessList.forEach(item => {
        if (item.accessId === obj.accessId) {
          accessName = item.name
        }
      })
      return accessName
    }
  }

  private handleSessionType (val: any) { // 处理卡片会话类型icon图标
    if (typeof val === 'string') {
      if (val === 'isRedirectSession') {
        return '[转]'
      } else if (val === 'isInitiatingSession') {
        return '[主]'
      } else if (val === 'isInvitedSession') {
        return '[邀]'
      } else if (val === 'isLossSession') {
        return '[流]'
      } else if (val === 'isActiveClaim') {
        return '[领]'
      }
    } else {
      if (val.sessionType === 'robot') {
        return '[机]'
      }
    }
  }

  // 客户标签
  private handleLabelName (val: string) {
    let labelList = this.$store.state.common.publicCache.customerAllLabels || []
    labelList = labelList.filter(v => v.enabled)
    let obj = {}
    labelList.map(v => {
      if (v._id === val) {
        obj = v
      }
    })
    return obj
  }

  // 下
  private sessionFlagIcon (item: any) {
    if (this.activeName && this.activeName === 'webchat_leaveMessage') {
      if (this.leaveMessageActiveName === 'leave_all') {
        return { icon: 'V7_iconV7tubiao_zhudonghuihua', content: '领取会话', type: 'claimLeaveSession' }
      } else if (this.leaveMessageActiveName === 'leave_todo') {
        return { icon: 'V7_iconV7tubiao_zhudonghuihua', content: '主动会话', type: 'initiatingLeaveSession' }
      } else {
        return { icon: '', content: '' }
      }
    } else {
      if (this.webchatActiveName === 'webchat_todo') {
        if (item.setTopStatus === 'true') {
          return { icon: 'V7_iconV7tubiao_quxiaozhiding', content: '取消置顶', type: 'noSetTop' }
        } else {
          return { icon: 'V7_iconV7tubiao_zhiding', content: '置顶', type: 'setTop' }
        }
      }
      if (this.webchatActiveName === 'webchat_close') {
        return { icon: 'V7_iconV7tubiao_zhudonghuihua', content: '主动会话', type: 'initiatingSession' }
      }
      if (checkPermission(null, { value: ['im_session_queue_claim'] }) && this.webchatActiveName === 'webchat_queue') {
        return { icon: 'V7_iconV7tubiao_lingqu', content: '领取会话', type: 'claimQueueSession' }
      } else {
        return { icon: '', content: '' }
      }
    }
  }

  // 上
  private sessionFlagIcon1 (item: any) {
    if (this.activeName && this.activeName === 'webchat_leaveMessage') {
      return { icon: '', content: '' }
    } else {
      if (this.webchatActiveName === 'webchat_close') {
        return { icon: '', content: '' }
      } else if (this.webchatActiveName === 'webchat_todo') {
        return { icon: 'V7_iconV7tubiao_zhuanchuhuihua', content: '转接会话', type: 'transfer' }
      } else {
        return { icon: '', content: '' }
        // return { icon: 'V7_iconV7tubiao_huihuayaoqing', content: '分配会话', type: 'distribution'}
      }
    }
  }

  private handleIsVistorBreakStyle (obj: BreakStyleObj, flag: string) {
    if (flag === 'sessionType') {
      if (obj.isVisitorBreak) { // 访客离线
        return 'color: #B3B9C7'
      } else {
        return 'color: #008BEE'
      }
    } else {
      if (obj.isVisitorBreak) { // 访客离线
        return 'color: #CFD0D1'
      } else { // 访客在线
        switch (obj.platform) {
          case 'pc': // pc渠道
            return 'color: #F4A818'
          case 'wap': // wap、h5
            return 'color: #41ACF8'
          case 'weixin': // 微信
            return 'color: #53C931'
          case 'wxmini': // 小程序
            return 'color: #53C931'
          case 'sdk': // sdk
            return 'color: #1A91ED'
          case 'wxsdk': // 微信小程序sdk
            return 'color: #08D067'
          case 'wxwork': // 企业微信
            return 'color: #FFFFFF'
          case 'ocpc': // 百度bcp
            return 'color: #4581fb'
          case 'wxkf': // 微信客服
            return 'color: #5db069'
        }
      }
    }
  }

  private lastMessage (obj: any) { // 最后一条消息消息展示处理
    if (obj.lastMessage) {
      switch (obj.lastMessage.contentType) {
        case 'image':
          return '[图片]'
        case 'file':
          return '[文件]'
        case 'text':
          return this.contentFilter(msgConvertion(filterXSS(obj.lastMessage.content), true), obj.lastMessage)
        case 'voice':
          return '[语音]'
        case 'video':
          return '[视频]'
        case 'miniprogrampage':
          return '[微信小程序商品卡片]'
      }
    }
  }

  private contentFilter (text: string, obj: any) {
    const wordsSetting: any = (this as any).$store.state.common.publicCache.globalConfig[0] || {}
    if (obj.lastMessageFrom === 'agent') {
      if (wordsSetting) {
        // 座席敏感词是否开启，是否有敏感词
        if (wordsSetting.agentSensitiveWordsFlag && wordsSetting.agentSensitiveWords) {
          const agentSensitiveWords = wordsSetting.agentSensitiveWords.split(',')
          if (agentSensitiveWords && agentSensitiveWords.length > 0) {
            for (let i = 0; i < agentSensitiveWords.length; i++) {
              const replaceString = '**'
              text = text.replace(RegExp(agentSensitiveWords[i], 'g'), replaceString);
            }
          }
        }
        // 座席关键词是否开启，是否有关键词
        if (wordsSetting.agentFocusWordsFlag && wordsSetting.agentFocusWords) {
          const agentFocusWords = wordsSetting.agentFocusWords.split(',')
          if (agentFocusWords && agentFocusWords.length > 0) {
            for (let i = 0; i < agentFocusWords.length; i++) {
              const replaceString = '<span style="color: ' + wordsSetting.agentFocusWordsColor + ';">' + agentFocusWords[i] + '</span>'
              text = text.replace(RegExp(agentFocusWords[i], 'g'), replaceString);
            }
          }
        }
      }
    } else {
      if (wordsSetting) {
        // 访客敏感词是否开启，是否有敏感词
        if (wordsSetting.visitorSensitiveWordsFlag && wordsSetting.visitorSensitiveWords) {
          const visitorSensitiveWords = wordsSetting.visitorSensitiveWords.split(',')
          if (visitorSensitiveWords && visitorSensitiveWords.length > 0) {
            for (let i = 0; i < visitorSensitiveWords.length; i++) {
              const replaceString = '**'
              text = text.replace(RegExp(visitorSensitiveWords[i], 'g'), replaceString);
            }
          }
        }
        // 判断访客关键词是否开启，是否有关键词
        if (wordsSetting.visitorFocusWordsFlag && wordsSetting.visitorFocusWords) {
          const visitorFocusWords = wordsSetting.visitorFocusWords.split(',')
          if (visitorFocusWords && visitorFocusWords.length > 0) {
            for (let i = 0; i < visitorFocusWords.length; i++) {
              const replaceString = '<span style="color: ' + wordsSetting.visitorFocusWordsColor + ';">' + visitorFocusWords[i] + '</span>'
              text = text.replace(RegExp(visitorFocusWords[i], 'g'), replaceString);
            }
          }
        }
      }
    }
    return text
  }

  private iconClick ($event: any, data: any, index: number) { // 卡片上的icon点击
    this.itemObj = data.item;
    if (data.info.type === 'transfer') {
      $event.stopPropagation()
      const actionData = { url: '/im-center/action/webchat/getPeerAndOnlineAgents', method: 'POST', data: {} }
      WebchatModule.webchatCommonAction(actionData).then(res => {
        if (res && res.success && res.peerAndOnlineAgents) {
          this.peerAndOnlineAgents = res.peerAndOnlineAgents
        }
      })
    }
    if (['claimLeaveSession', 'initiatingLeaveSession', 'initiatingSession', 'claimQueueSession', 'noSetTop', 'setTop', 'distribution'].includes(data.info.type)) { // 主动会话 || 留言领取
      $event.stopPropagation()
      const { _id, visitorId } = data.item
      let sendData = {}
      let url = `/im-center/action/webchat/${data.info.type}`
      if (data.info.type === 'setTop') {
        sendData = { sessionId: _id, visitorId, status: true }
      } else if (data.info.type === 'noSetTop') {
        url = '/im-center/action/webchat/setTop'
        sendData = { sessionId: _id, visitorId, status: false }
      } else {
        sendData = { sessionId: _id, visitorId }
      }
      const actionData = { url, method: 'POST', data: sendData }
      WebchatModule.webchatCommonAction(actionData).then((res: any) => {
        if (res) {
          this.$message.success(`${data.info.content}成功`)
          WebchatModule.CLOSE_WEBCHAT_SESSION({ type: this.activeName, id: _id })
          this.$emit('iconHandleFun', _id)
        } else {
          if (data.info.type === 'claimQueueSession') {
            this.$emit('iconHandleFun', _id)
          }
        }
      })
    }
  }

  private transferPeerOrAgent (obj: PeerOrAgentObj) {
    const sendData: any = {
      sessionId: this.itemObj._id, // 会话id
      visitorId: this.itemObj.visitorId
    }
    if (obj.agentInfo) { // 转接座席
      sendData.peerId = obj.peerInfo.peerId // 座席所在技能组id
      sendData.peerName = obj.peerInfo.peerName // 座席所在技能组名
      sendData.agentId = obj.agentInfo.agentId // 转接座席id
    } else { // 转接技能组
      sendData.peerId = obj.peerId // 技能组id
      sendData.peerName = obj.peerName // 技能组名
    }
    const actionData = { url: '/im-center/action/webchat/redirectWebchatSession', method: 'POST', data: sendData }
    WebchatModule.webchatCommonAction(actionData).then(res => {
      if (res && res.success) {
        this.$message.success('转接成功')
        WebchatModule.CLOSE_WEBCHAT_SESSION({ type: this.webchatActiveName, id: this.itemObj._id }) // 右侧清除会话
      }
    })
  }

  private refreshTransfer () { // 刷新转接数据
    const actionData = { url: '/im-center/action/webchat/getPeerAndOnlineAgents', method: 'POST', data: {} }
    WebchatModule.webchatCommonAction(actionData).then(res => {
      if (res && res.success && res.peerAndOnlineAgents) {
        this.peerAndOnlineAgents = res.peerAndOnlineAgents
      }
    })
  }

  private handleClickItem (item: CardObj) { // 点击卡片
    if (this.activeName === 'webchat_todo') {
      this.$router.push({ path: `/im_workBench/index/${this.webchatActiveName}/${item._id}` })
    } else {
      this.$router.push({ path: `/im_workBench/index/${this.activeName}/${item._id}` })
    }
    Vue.set(item, 'leakNum', 0) // 点击卡片清空当前未读消息数
    this.$emit('cardItemClick', item)
  }

  private handelKeydown (e) {
    const currentMoudle = this.$route.path.split('/')[1]
    if (currentMoudle === 'im_workBench') {
      let currentIndex = this.cardList.findIndex((item: any) => {
        return item._id === this.currentId
      })
      if ((e.ctrlKey || e.metaKey) && e.keyCode === 38) { // ctrl + up
        currentIndex--
        if (currentIndex < 0) {
          return false
        }
        const currentItem: any = this.cardList[currentIndex]
        this.handleClickItem(currentItem)
      } else if ((e.ctrlKey || e.metaKey) && e.keyCode === 40) { // ctrl + down
        currentIndex++
        if (currentIndex >= this.cardList.length) {
          return false
        }
        const currentItem: any = this.cardList[currentIndex]
        this.handleClickItem(currentItem)
      }
    }
  }

  private cardDelete (item: CardObj) { // 结束会话
    this.$confirm('确定要结束会话吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      if (this.activeName === 'webchat_todo') {
        const data = { finishData: [{ _id: item._id, visitorId: item.visitorId }] }
        const actionData = { url: '/im-center/action/webchat/finishWebchatSession', method: 'POST', data }
        WebchatModule.webchatCommonAction(actionData).then((res: any) => {
          if (res) {
            WebchatModule.CLOSE_WEBCHAT_SESSION({ type: this.activeName, id: item._id })
            this.$emit('queryWebchatList')
          }
        })
      } else {
        const data1 = { sessionId: item._id, visitorId: item.visitorId }
        const actionData1 = { url: '/im-center/action/webchat/finishLeaveSession', method: 'POST', data: data1 }
        WebchatModule.webchatCommonAction(actionData1).then(res => {
          if (res) {
            WebchatModule.CLOSE_WEBCHAT_SESSION({ type: this.activeName, id: item._id })
            this.$emit('iconHandleFun', item._id) // 留言待处理中关闭会话清空右侧
            this.$emit('queryWebchatList')
          }
        })
      }
    })
  }

  private routerChange () {
    const currentRouteParams = this.$router.currentRoute.params
    if (this.$route.name === 'webchatCard') { // 刷新页面记住上次点击的会话
      if (currentRouteParams && currentRouteParams.id) {
        this.currentId = currentRouteParams.id
      }
    }
  }

  private mounted () {
    this.routerChange()
    this.toPeerObj = this.$store.state.common.publicCache.queueListObj || {};
    (this as any).$getCache('/im-center/action/webchat/channelCache', ['channelList'], true, true, true, 'POST', true).then((res: any) => {
      this.accessList = res.channelList || []
    })
    this.toPeerObj = this.$store.state.common.publicCache.queueListObj || {}
    on(document, 'keydown', this.handelKeydown);
    (this as any).$getCache('/server-crm/action/customer/common/labels', ['customerAllLabels'], true, false, false, 'GET', false, 'data') // 客户标签
  }

  private beforeDestroy () {
    off(document, 'keydown', this.handelKeydown)
  }

  @Watch('$route')
  private routeChange () {
    this.routerChange()
  }
}
</script>
<style lang="stylus" scoped>
.webchatCard
  .cardItem
    height 90px
    width 100%
    border-radius 6px
    cursor pointer
    box-sizing border-box
    position relative
    overflow hidden
    .deleteCard
      position absolute
      right 0
      top 0
      width 17px
      height 17px
      background #FC6B5C
      border-radius 0 0 0 17px
      color white
      text-align center
      line-height 12px
      padding-left 3px
      z-index 1222
      display none
    .zhidingCard
      position absolute
      left 3px
      top 3px
      border 8px solid transparent
      border-top 8px solid #2ed47a
      border-left 8px solid #2ed47a
      border-radius 4px
    .sessionType
      border 1px solid $border-main
      width 22px
      height 22px
    .cardRight
      width 100%
      padding 0 20px 0 10px
      .cardTop
        margin-top 14px
        width 100%
        height 12px
        display flex
        justify-content space-between
        .customerName
          display inline-block
          height 13px
          font-size 12px
          font-family PingFang SC
          font-weight 400
          color #767E91
          max-width 100px
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
          vertical-align middle
          line-height 12px
        .count
          font-size 12px
          font-family PingFang SC
          font-weight 400
          color #767E91
        .time
          height 12px
          font-size 12px
          font-family PingFang SC
          font-weight 400
          text-align right
          color #B3B9C7
      .secondLine
        margin-top 10px
        width 100%
        line-height 20px
        height 20px
        .lastMessageBox
          margin-right 10px
          float left
          .lastMessageType
            height 12px
            font-size 12px
            font-family PingFang SC
            font-weight 400
            color #303753
            vertical-align middle
          .lastMessage
            max-width 120px
            font-size 12px
            font-family PingFang SC
            font-weight 400
            color #303753
            display inline-block
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            vertical-align middle
        .toPeer
          float right
          max-width 90px
          color #008BEE
          font-size 12px
          height 100%
          display flex
          justify-content flex-start
          .toPeerText
            vertical-align middle
            display inline-block
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
          .line
            display inline-block
            vertical-align middle
      .cardBottom
        width 100%
        margin-top 10px
        color #767e91
        display flex
        justify-content space-between
        .wapMessge
          flex 1
          display flex
          justify-content flex-start
          padding-right 10px
          .equipment
            color #CFD0D1
            width 20px
            height 20px
            border-radius 50%
            text-align center
            line-height 12px
            vertical-align middle
            .logo
              width 10px
              height 10px
              color #CFD0D1
          .line
            display inline-block
            width 1px
            height 8px
            background #767e91
            margin 3px 4px
          .wapName
            flex 1
            width 0
            line-height 15px
            font-size 12px
            font-family PingFang SC
            font-weight 400
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            margin-right 2px
        .customMessage
          font-size 12px
          font-family PingFang SC
          font-weight 400
          .lastMessage
            vertical-align middle
          .customName
            height 14px
            line-height 12px
            background #3E7FEF
            border-radius 10px
            font-size 12px
            font-family PingFang SC
            font-weight 400
            color #FFFFFF
            max-width 70px
            text-overflow ellipsis
            overflow hidden
            vertical-align middle
        .visitorsHeadImg
          width 20px
          height 20px
          border-radius 50%
      .opateTop
        position absolute
        right 5px
        bottom 37px
        display none
        .sessionFlag1
          font-size 12px
          width 12px
          height 12px
      .opateBottom
        position absolute
        right 5px
        bottom 14px
        display none
        .sessionFlag
          font-size 12px
          width 12px
          height 12px
  .active
    background $c-main
    color white
    .time, .webchatLink
      color white !important
    .cardTop
      .customerName
        color white !important
      .count
        color white !important
    .toPeer
      color white !important
    .secondLine .lastMessageBox .lastMessageType
      color white !important
    .lastMessageBox .lastMessage
      color white !important
    .cardRight
      .opateTop
        .sessionFlag1
          display block
          color white !important
      .opateBottom
        .sessionFlag
          display block
          color white !important
      .cardBottom
        .wapMessge
          color #fff !important
          .line
            background #fff !important
        .customMessage
          color #fff !important
        .wapMessge .logo
          color #fff !important
  .active:hover
    background #008BEE !important
  .cardItem:hover
    background #F3F6F9
    .deleteCard
      display block
    .sessionFlag
      display block
    .sessionFlag1
      display block
    .cardRight .opateTop
      display block
      .sessionFlag1
        color #A6A6AE
    .cardRight .opateBottom
      display block
      .sessionFlag
        color #A6A6AE
</style>
<style lang="stylus">
.webchatCard
  .el-badge__content
    min-width 16px
    height 16px
    font-size 10px
    font-family PingFang SC
    font-weight 600
    color #F7F7F7
    line-height 16px
    position absolute
    right 2px
    top -1px
    border-radius 50%
    padding 2px !important
  .el-badge__content.is-fixed
    border none
    transform scale(0.8)
    top -6px
    right -2px
  .el-tag--dark
    border-color transparent !important
</style>
